<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../index.css">
<div class="container-fluid d-flex flex-column overflow-hidden" style="height:100vh;" id="app">
    <div class="container-fliud" style="height:300px;">
        <div class="row pt-4">
            <div class="col-1">&nbsp;</div>
            <div class="col">
                <div class="input-group text-center" style="width:350px;">
                    <input type="text" class="form-control form-control-sm" v-model="idCard" style="width:200px;" placeholder="18位身份证号码">
                    <button class="btn btn-success btn-sm" style="width:100px;" @click="checkIdCard">验&nbsp;&nbsp;证</button> 
                </div>
            </div>
            <div class="col-1">&nbsp;</div>
        </div>
        <div class="row" style="padding-top:20px;">
            <div class="col-1">&nbsp;</div>
            <div class="col">
                <table class="table table-border">
                    <tbody>
                        <tr>
                            <td>归属地</td>
                            <td>{{area}}</td>
                        </tr>
                        <tr>
                            <td>生日</td>
                            <td>{{birthday}}</td>
                        </tr>
                        <tr>
                            <td>性别</td>
                            <td>{{gender}}</td>
                        </tr>
                        <!-- <tr>
                            <td>年龄</td>
                            <td>{{age}}</td>
                        </tr> -->
                        <tr>
                            <td>校验结果</td>
                            <td>{{result}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-1">&nbsp;</div>
        </div>
    </div>
</div>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../node_modules/vue/dist/vue.global.prod.js"></script>
<script src="../lib/idcard.verify.js"></script>
<script>
const app = {
    data() {
        return {
            idCard: '',
            area: '',
            birthday: '',
            gender: '',
            age: '',
            result: ''
        }
    },
    created() {
        document.addEventListener('keyup', (e) => {
            if (e.ctrlKey && e.shiftKey && (e.key == 'I' || e.key ==  'i')) {
                parent.devTools();
            }
            if (e.ctrlKey && (e.key == 'r' || e.key == 'R')) {
                parent.refresh();
            }
        });
    },
    methods: {
        checkIdCard() {
            console.info('当前身份证号=====%s', this.idCard);
            let idc = new IDCard();
            let ret = idc.verify(this.idCard);
            console.info(ret)
            if(!ret.result) {
                alert(ret.msg)
                return;
            }
            this.area = ret.p + ' ' + ret.c + ' ' + ret.d;
            this.birthday = ret.bd;
            this.gender = ret.g;
            this.result = '校验位正确'
        }
    }
}
Vue.createApp(app).mount('#app');
</script>